<script setup>
  import axios from 'axios';
  import { ref } from 'vue';

  /* let message = ref("")
  function getLoveMessage(){
    let promise = axios({
      method:"get",
      url:"https://api.uomg.com/api/rand.qinghua",
      params:{
        format:"json"
      }
    })

    promise.then(
      function(response) {
        console.log(response)
        message.value = response.data.content
      }
    ).catch(
      function(error){
        console.log(error)
      }
    )
  } */


 /**
  * axios的简化写法：
  *   get请求：
  *     axios.get("url")
  *     axios.get("url", {params:{url后面的键值对参数}, headers:{请求头参数}})
  *   post请求：
  *     axios.post("url")
  *     axios.post("url", {请求体中的键值对}, {params:{url后面的键值对参数}, headers:{请求头参数}})
  */
  /* let message = ref('')
  function getLoveMessage() {
    let promise = axios.get("https://api.uomg.com/api/rand.qinghua", {params: {format: "json"}, headers: {}})
    promise.then(
      function(response) {
        message.value = response.data.content
      }
    ).catch(
      function(error) {

      }
    )
  } */


  /**
   * axios的简化写法，配合async和await
   */
  let message = ref('')
  function getPromise() {
    return axios.get("https://api.uomg.com/api/rand.qinghua", {params: {format: "json"}, headers: {}})
  }

  async function getLoveMessage(){
    // let response = await getPromise()
    // message.value = response.data.content
    let {data} = await getPromise()
    message.value = data.content
  }



</script>

<template>
  <div>
    <h1 v-text="message"></h1>
    <button @click="getLoveMessage()">变</button>
  </div>
  
</template>

<style scoped>

</style>
